/* 全局响应式样式规则 */

/* CSS自定义属性 - 响应式尺寸 */
:root {
    /* 断点值 */
    --bp-xs: 360px;
    --bp-sm: 480px;
    --bp-md: 600px;
    --bp-lg: 768px;
    --bp-xl: 1024px;
    --bp-tauri-narrow: 500px;
    --bp-tauri-wide: 800px;

    /* 动态尺寸变量 */
    --font-scale: 1;
    --space-scale: 1;
    --border-width: 1px;

    /* 基于rem的响应式间距 */
    --spacing-xs: calc(0.25rem * var(--space-scale));
    /* 4px 基准 */
    --spacing-sm: calc(0.5rem * var(--space-scale));
    /* 8px 基准 */
    --spacing-md: calc(0.75rem * var(--space-scale));
    /* 12px 基准 */
    --spacing-lg: calc(1rem * var(--space-scale));
    /* 16px 基准 */
    --spacing-xl: calc(1.25rem * var(--space-scale));
    /* 20px 基准 */
    --spacing-2xl: calc(1.5rem * var(--space-scale));
    /* 24px 基准 */
    --spacing-3xl: calc(2rem * var(--space-scale));
    /* 32px 基准 */

    /* 基于rem的动态字体大小 */
    --text-xs: calc(0.75rem * var(--font-scale));
    /* 12px 基准 */
    --text-sm: calc(0.875rem * var(--font-scale));
    /* 14px 基准 */
    --text-base: calc(1rem * var(--font-scale));
    /* 16px 基准 */
    --text-lg: calc(1.125rem * var(--font-scale));
    /* 18px 基准 */
    --text-xl: calc(1.25rem * var(--font-scale));
    /* 20px 基准 */
    --text-2xl: calc(1.5rem * var(--font-scale));
    /* 24px 基准 */
    --text-3xl: calc(1.875rem * var(--font-scale));
    /* 30px 基准 */

    /* 基于rem的圆角 */
    --radius-xs: calc(0.25rem * var(--space-scale));
    /* 4px 基准 */
    --radius-sm: calc(0.375rem * var(--space-scale));
    /* 6px 基准 */
    --radius-md: calc(0.5rem * var(--space-scale));
    /* 8px 基准 */
    --radius-lg: calc(0.75rem * var(--space-scale));
    /* 12px 基准 */
    --radius-xl: calc(1rem * var(--space-scale));
    /* 16px 基准 */

    /* 基于rem的阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* 组件特定尺寸 */
    --header-height: calc(3.5rem * var(--space-scale));
    /* 56px 基准 */
    --card-padding: var(--spacing-lg);
    --card-margin: var(--spacing-md);
    --button-height: calc(2.5rem * var(--space-scale));
    /* 40px 基准 */
    --input-height: calc(2.5rem * var(--space-scale));
    /* 40px 基准 */

    /* 颜色变量 */
    --primary-color: #2c7a7b;
    --primary-light: #4fd1c7;
    --primary-dark: #234e52;

    --bg-color: #f5f7fa;
    --bg-secondary: #edf2f7;
    --card-bg: #ffffff;
    --header-bg: #2c7a7b;

    --text-primary: #2d3748;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --border-color: #e2e8f0;
    --border-hover-color: #cbd5e0;

    --scrollbar-thumb: #81e6d9;
    --scrollbar-thumb-hover: #4fd1c7;
}

/* 设备类型样式 */
.device-mobile {
    --font-scale: 0.85;
    --space-scale: 0.8;
}

.device-tablet {
    --font-scale: 0.9;
    --space-scale: 0.85;
}

.device-tauri-narrow {
    --font-scale: 0.9;
    --space-scale: 0.85;
}

.device-tauri-wide {
    --font-scale: 1;
    --space-scale: 1;
}

/* 平台特定样式 */
.platform-windows {
    --border-width: 1px;
}

.platform-macos.supports-blur {
    --border-width: 0.5px;
}

/* 高DPI屏幕优化 */
.retina {
    --border-width: 0.5px;
}

/* 断点样式 - 更细粒度的控制 */
.bp-xs {
    --font-scale: 0.8;
    --space-scale: 0.75;
    --card-padding: var(--spacing-md);
    --card-margin: var(--spacing-sm);
}

.bp-sm {
    --font-scale: 0.85;
    --space-scale: 0.8;
    --card-padding: var(--spacing-md);
    --card-margin: var(--spacing-sm);
}

.bp-md {
    --font-scale: 0.9;
    --space-scale: 0.85;
    --card-padding: var(--spacing-lg);
    --card-margin: var(--spacing-md);
}

/* 响应式工具类 */

/* 显示/隐藏 */
.hide-xs {
    display: none !important;
}

.hide-sm {
    display: none !important;
}

.hide-md {
    display: none !important;
}

.hide-lg {
    display: none !important;
}

@media (min-width: 361px) {
    .hide-xs {
        display: revert !important;
    }

    .show-xs {
        display: none !important;
    }
}

@media (min-width: 481px) {
    .hide-sm {
        display: revert !important;
    }

    .show-sm {
        display: none !important;
    }
}

@media (min-width: 601px) {
    .hide-md {
        display: revert !important;
    }

    .show-md {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-lg {
        display: revert !important;
    }

    .show-lg {
        display: none !important;
    }
}

/* 间距工具类 */
.p-responsive {
    padding: var(--card-padding);
}

.p-responsive-sm {
    padding: var(--spacing-sm);
}

.p-responsive-md {
    padding: var(--spacing-md);
}

.p-responsive-lg {
    padding: var(--spacing-lg);
}

.m-responsive {
    margin: var(--card-margin);
}

.m-responsive-sm {
    margin: var(--spacing-sm);
}

.m-responsive-md {
    margin: var(--spacing-md);
}

.m-responsive-lg {
    margin: var(--spacing-lg);
}

.gap-responsive {
    gap: var(--spacing-md);
}

.gap-responsive-sm {
    gap: var(--spacing-sm);
}

.gap-responsive-lg {
    gap: var(--spacing-lg);
}

/* 字体大小工具类 */
.text-responsive {
    font-size: var(--text-base);
}

.text-responsive-xs {
    font-size: var(--text-xs);
}

.text-responsive-sm {
    font-size: var(--text-sm);
}

.text-responsive-lg {
    font-size: var(--text-lg);
}

.text-responsive-xl {
    font-size: var(--text-xl);
}

/* 响应式容器 */
.responsive-container {
    width: 100%;
    max-width: 100vw;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
}

/* 响应式网格 */
.responsive-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

@media (min-width: 481px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* 响应式弹性布局 */
.responsive-flex {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.responsive-flex>* {
    flex: 1;
    min-width: 0;
}

/* 响应式卡片 */
.responsive-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    margin-bottom: var(--card-margin);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.responsive-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

/* 响应式按钮 */
.responsive-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    height: var(--button-height);
    min-height: var(--button-height);
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.responsive-button:hover {
    transform: translateY(-1px);
}

/* 响应式输入框 */
.responsive-input {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-color);
    height: var(--input-height);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.responsive-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(44, 122, 123, 0.1);
}

/* 响应式弹窗 */
.responsive-dialog {
    width: 85%;
    max-width: 30rem;
    /* 480px in default */
    min-width: 22.5rem;
    /* 360px in default */
    max-height: 90vh;
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    background: var(--card-bg);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-xl);
}

/* 断点适配 - 基于rem的响应式 */
@media (max-width: 360px) {
    .responsive-dialog {
        width: 98%;
        max-width: 20rem;
        /* 320px */
        min-width: 17.5rem;
        /* 280px */
        padding: var(--spacing-lg);
    }

    .responsive-container {
        padding: 0 var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .responsive-dialog {
        width: 92%;
        max-width: 22.5rem;
        /* 360px */
        min-width: 18.75rem;
        /* 300px */
    }
}

@media (max-width: 600px) {
    .responsive-dialog {
        width: 90%;
        max-width: 25rem;
        /* 400px */
        min-width: 20rem;
        /* 320px */
    }
}

/* Tauri窗口特殊适配 */
@media (min-width: 400px) and (max-width: 500px) and (min-height: 600px) {
    .responsive-dialog {
        width: 88%;
        max-width: 28.125rem;
        /* 450px */
        min-width: 23.75rem;
        /* 380px */
    }

    .responsive-container {
        padding: 0 var(--spacing-lg);
    }
}

/* 高度限制适配 */
@media (max-height: 500px) {
    .responsive-dialog {
        max-height: 90vh;
        padding: var(--spacing-md);
    }
}

/* 横屏模式适配 */
@media (orientation: landscape) and (max-height: 400px) {
    .responsive-dialog {
        max-height: 95vh;
        width: 70%;
        max-width: 37.5rem;
        /* 600px */
    }
}

/* 平台特定样式 */
@media (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    /* Windows特定样式 */
    .responsive-dialog {
        box-shadow: var(--shadow-xl);
    }
}

@supports (-webkit-backdrop-filter: blur()) {

    /* macOS特定样式 */
    .supports-blur .responsive-dialog {
        backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.95);
    }

    .supports-blur .responsive-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.9);
    }
}

/* 触摸设备优化 */
.touch .responsive-button {
    min-height: 2.75rem;
    /* 44px */
    min-width: 2.75rem;
}

.touch .responsive-input {
    min-height: 2.75rem;
    /* 44px */
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --card-bg: #2d2d2d;
        --header-bg: #1a365d;

        --text-primary: #e6e6e6;
        --text-secondary: #999999;
        --text-muted: #666666;

        --border-color: #3d3d3d;
        --border-hover-color: #4a4a4a;
    }

    .supports-blur .responsive-dialog {
        background: rgba(26, 26, 26, 0.95);
    }

    .supports-blur .responsive-card {
        background: rgba(45, 45, 45, 0.9);
    }
}

/* 动画和过渡优化 */
@media (prefers-reduced-motion: reduce) {

    .responsive-button,
    .responsive-input,
    .responsive-card,
    .responsive-dialog {
        transition: none;
    }

    .responsive-button:hover,
    .responsive-card:hover {
        transform: none;
    }
}

/* 打印样式 */
@media print {
    .responsive-dialog {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }

    .hide-print {
        display: none !important;
    }
}